<template>
	<view>
		<view class="content" v-for="(item,index) in dataArr">
			<img class="img" :src="item.imgHand" @click="goDetail(item)" />
			<view class="videoName">
				{{item.videoName}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		findCollect,
		login
	} from "../../config/api.js"
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				dataArr: [] //数据
			};

		},
		onShow() {
			this.findCollectFun();
		},
		
		onReachBottom() {
			console.log("触底了");
			this.page = this.page + 1;
			this.findCollectFun();
		},
		methods:{
			goDetail(e) {
				console.log("?????=", e );
				uni.navigateTo({
					url: "/pages/details/details?id=" + e.id
				})
			
			},
			findCollectFun() {
				let that = this;
				let param = {
					page: this.page,
					limit: this.limit
				}
				findCollect({
					custom: {
						auth: true,
						loading: false
					},
					params: param
				}).then((res) => {
					for (var i = 0; i < res.data.length; i++) {
						that.dataArr.push(res.data[i])
					}
				}).catch((e) => {})
			}
		}
		//数据接口

	}
</script>

<style lang="scss">
	page {
		background: #222222;
	}


	.content {
		float: left;
		position: relative;
		top: 20rpx;
		width: 310rpx;
		height: 330rpx;
		padding-top: 20rpx;
		margin-left: 45rpx;
		.img {
			border-radius: 17%;

			width: 300rpx;
			height: 300rpx;

		}
		.videoName{
			
			// left: 50rpx;
			
			position: absolute;
			/* 相对于最近的定位元素进行定位 */
			top: 87%;
			/* 水平居中 */
			left: 50%;
			/* 垂直居中 */
			transform: translate(-50%, -50%);
			/* 根据自身大小调整位置 */
			padding: 10px;
			/* 内边距 */
			font-size: 13px;
			/* 字体大小 */
			color: #e3e3e3;
			/* 红色字体 */
			font-family: "SimHei", sans-serif;
			/* SimHei为黑体的名称 */
			line-height: 1.5;
			text-align: center;
		}
	}
</style>